<route lang="json5" type="page">
{
  type: 'page',
  needLogin: true,
  style: {
    navigationBarTitleText: '水质自检信息',
    navigationBarBackgroundColor: '#FFFFFF',
  },
}
</route>
<template>
  <view class="py-2 px-4">
    <view class="river-drop flex">
      <view class="river-label">选择河道</view>
      <view class="flex-1">
        <wd-picker
          v-model="river"
          :columns="riverOptions"
          placeholder="请选择河道"
          value-key="id"
          label-key="title"
        />
      </view>
    </view>
    <view class="river-data mt-2" v-for="(item, index) in 3" :key="index">
      <view class="flex items-center pa-3 pb-0">
        <view class="block"></view>
        <view class="text-sm color-base font-semibold flex-1 ml-2">梅东河监测站数据</view>
        <wd-datetime-picker prop="date" v-model="item.date" align-right type="date" />
      </view>
      <wd-grid :gutter="10">
        <wd-grid-item use-slot>
          <view class="text-xs color-gray">泵东</view>
          <view class="color-base mt-1">
            <text class="text-base font-semibold">0.69</text>
          </view>
        </wd-grid-item>
        <wd-grid-item use-slot>
          <view class="text-xs color-gray">泵东</view>
          <view class="color-base mt-1">
            <text class="text-base font-semibold">0.24</text>
          </view>
        </wd-grid-item>
        <wd-grid-item use-slot>
          <view class="text-xs color-gray">泵东</view>
          <view class="color-base mt-1">
            <text class="text-base font-semibold">18</text>
          </view>
        </wd-grid-item>
      </wd-grid>
    </view>
  </view>
</template>

<script lang="ts" setup>
const river = ref<number>(0)
const riverOptions = ref([])
const getRiverData = async () => {
  river.value = 1
  riverOptions.value = [
    { title: '全部河道', value: 0 },
    { title: '河道1', value: 1 },
    { title: '河道2', value: 2 },
  ]
}
const handleRiverChange = ({ value }) => {
  console.log(value)
}
onMounted(() => {
  getRiverData()
})
</script>

<style lang="scss">
page {
  background: #f4f8fb;
  /* #ifdef H5 */
  min-height: 100%;
  /* #endif */
}
$white-color: #fff;
$primary-color: #2953ff;
$primary-light-color: #52bfff;
$light-color: #f7f8fa;
:deep(.river-drop) {
  height: 64rpx;
  border-radius: 12rpx;
  overflow: hidden;
  .river-label {
    color: $white-color;
    background: $primary-color;
    font-size: 26rpx;
    line-height: 64rpx;
    width: 140rpx;
    text-align: center;
  }
  .wd-picker {
    height: 64rpx;
    .wd-cell {
      background: #fff;
    }
    .wd-cell__wrapper {
      padding: 0 20rpx 0 0;
      height: 64rpx;
      align-items: center;
    }
  }
}
:deep(.river-data) {
  background: #fff;
  border-radius: 14rpx;
  .block {
    width: 12rpx;
    height: 12rpx;
    background: #fcca1e;
  }
  .wd-grid-item {
    border-radius: 14rpx;
  }
  .wd-grid-item__content {
    padding: 20rpx !important;
    text-align: left;
    border-radius: 18rpx;
    background: $light-color !important;
  }
}
:deep(.wd-datetime-picker) {
  .wd-cell__wrapper {
    padding: 0 !important;
  }
  .wd-cell__value {
    font-size: 26rpx;
  }
}
</style>
